<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="遇见与成长 - 图腾客户管理系统 - 用户详情">
        <title>{{title}}</title>
        <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
        <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
        <link rel="stylesheet" href="/apps/css/mui.css">
    </head>
    <body>
        <header class="d-flex align-items-center bg-custom-color p-3">
            <button id="backButton" class="btn btn-primary rounded-circle me-3" style="background-color: white;" onclick="history.back();">
                <i class="fas fa-arrow-left custom-color"></i>
            </button>
            <div>
                <span class="title-text text-white fs-5">U#{{user.uid}} {{user.real_name}}</span>
                <div class="text-white">
                    <span>{{{user.roleInfo}}} {{user.agency}}</span>
                    <span>{{{user.promoterInfo}}} {{{user.typeInfo}}} {{{user.subscribeInfo}}} {{{user.sourceInfo}}}</span>
                </div>
            </div>
        </header>
        <div class="container">
            <div class="content">
                <div class="row p-2">

                    <div class="col-md-4 border mt-2 p-2">
                        <div class="row">
                            <div class="col-8">
                                <div id="user-info">
                                    <!-- User Basic Information -->
                                    <div>
                                        <h5>{{user.memberInfo}} U#{{user.uid}} {{user.nickname}}&nbsp;</h5>
                                        <p>{{user.agency}} {{user.department}} {{user.title}} {{user.phone}}</p>
                                        <p style="color:#c1c1c1">{{{user.codes}}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div id="user-avatar">
                                    <div class="text-center">
                                        <div>
                                            <img src="{{{user.avatar}}}" class="rounded-circle" alt="User Image" width="100px" height="100px">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div id="extended-info">
                                    <!-- User Referrer Information -->
                                    <div>
                                        <h5>折扣{{{user.discount}}}% 图贝{{user.now_money}} 金豆{{user.integral}}&nbsp;</h5>
                                        <p>{{user.purchased}}</p>
                                        <p style="color:#c1c1c1">购买历史 {{{user.goods_list}}}</p>
                                    </div>
                                    <!-- User Overview -->
                                    <div>
                                        <h5>客服备注&nbsp;</h5>
                                        <p>{{{user.mark}}}</p>
                                        <p style="color:#c1c1c1">最新档案 [{{{user.last_memo}}}]</p>
                                    </div>
                                    <!-- Other Information -->
                                    <div>
                                        <h5>事件提示&nbsp;</h5>
                                        <p>{{{user.events}}}</p>
                                        <p style="color:#c1c1c1">用户计划 [{{{user.profile}}}]</p>
                                    </div>
                                    <div>
                                        <h5>关联信息</h5>
                                        <span style="color:#c1c1c1">{{{user.csrInfo}}}</span>
                                        <span style="color:#c1c1c1">{{{user.repInfo}}}</span>
                                        <span style="color:#c1c1c1">{{{user.uplineInfo}}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-8 mt-2">
                        <!-- Second Area - Tabbed Content for User Records -->
                        <div class="user-records">
                            <!-- Tab bar for different user records -->
                            <ul class="nav nav-tabs" id="userRecordsTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="userProfilesTab" data-bs-toggle="tab" href="#userProfiles" role="tab" aria-controls="userProfiles" aria-selected="true">档案记录</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="userTracksTab" data-bs-toggle="tab" href="#userTracks" role="tab" aria-controls="userTracks" aria-selected="false">访问轨迹</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="userOrdersTab" data-bs-toggle="tab" href="#userOrders" role="tab" aria-controls="userOrders" aria-selected="false">历史订单</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="userCouponsTab" data-bs-toggle="tab" href="#userCoupons" role="tab" aria-controls="userCoupons" aria-selected="false">优惠礼券</button>
                                </li>
                            </ul>

                            <!-- Tab content for different user records -->
                            <div class="tab-content" id="userRecordsTabContent">
                                <div class="tab-pane fade show active p-2" id="userProfiles" role="tabpanel" aria-labelledby="userProfilesTab">
                                    <!-- Display user's profiles and corresponding operations -->
                                    <h5>请选择</h5>
                                    <p><a class="custom-link" href="http://totemlife.cn/apps/crm/create-user-profile?uid={{user.uid}}">添加用户记录</a></p>
                                    <div class ="row">
                                        <div class="table-responsive">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>来源</th>
                                                        <th>内容</th>
                                                        <!-- 添加其他需要显示的列 -->
                                                    </tr>
                                                </thead>
                                                <tbody id="userProfileRecords">
                                                    {{#each profiles}}
                                                    <tr data-id="{{this.id}}" onclick="">
                                                        <td class="cell-content" width="25%">
                                                            <small>{{{this.type}}} {{{this.atype}}}#{{{this.aid}}}<br><span style='color:#c1c1c1'>{{{this.created_at}}} #{{this.id}}</span></small>
                                                        </td>
                                                        <td class="cell-content">
                                                            <small>{{{this.memo}}}</small><br>
                                                            <small>{{{this.attachments_link}}}</small>
                                                        </td>
                                                    </tr>
                                                    {{/each}}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade p-2" id="userTracks" role="tabpanel" aria-labelledby="userTracksTab">
                                    <!-- Display user's orders and corresponding operations -->
                                    <h5>访问轨迹</h5>
                                    <p><a class="custom-link" href="https://totemlife.cn/apps/cgi-bin/show-tmall-tracks?uid={{user.uid}}" target="_blank">点这里先凑合看</a></p>
                                </div>
                                <div class="tab-pane fade p-2" id="userOrders" role="tabpanel" aria-labelledby="userOrdersTab">
                                    <!-- Display user's orders and corresponding operations -->
                                    <h5>订单信息</h5>
                                    <p><a class="custom-link" href="https://totemlife.cn/apps/cgi-bin/show-torder-infos?uid={{user.uid}}" target="_blank">点这里先凑合看</a></p>
                                </div>
                                <div class="tab-pane fade p-2" id="userCoupons" role="tabpanel" aria-labelledby="userCouponsTab">
                                    <!-- Display user's coupons and corresponding operations -->
                                    <h5>礼券信息</h5>
                                    <p>敬请期待
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <nav aria-label="Page navigation" class="pagination-container">
                <button id="homeButton" class="btn btn-primary position-absolute top-0 start-0 m-3 rounded-circle" style="width: 50px; height: 50px; padding: 0;" onclick="window.location.href='https://totemlife.cn/apps/crm/';">
                    <i class="fas fa-home" style="color:white;"></i>
                </button>
                <button id="formButton" class="btn btn-primary position-absolute top-0 end-0 m-3 rounded-circle" style="width: 50px; height: 50px; padding: 0;" onclick="showQueryForm();">
                    <i class="fas fa-search" style="color: white;"></i>
                </button>
                <ul class="pagination">
                    {{{paginator}}}
                </ul>
            </nav>

        </div>

        <div class="modal fade" id="queryModal" tabindex="-1" aria-labelledby="queryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="queryModalLabel">按用户编号显示</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="queryForm" onsubmit="submitQueryForm()">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-2">
                                        <label for="uid" class="form-label">UID</label>
                                        <input type="text" class="form-control" id="uid" name="uid" value="{{uid}}" placeholder="搜索用户识别号">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer" id="clientModalFooter">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭查询</button>
                                <button type="submit" class="btn btn-primary">查询数据</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Footer with Back Button and Search Button -->
        <footer class="footer" style="text-align: center;">
            <div class="row">
                <div class="text-muted">&nbsp;</div>
                <div class="text-muted" sytle="color:1c1c1c">&nbsp;{{crmROLE}}</div>
                <div class="text-muted">&copy;2023 图腾生命医学</div>
                <div class="text-muted">我们为人类免疫事业而奉献</div>
            </div>
        </footer>

        <!-- JavaScript scripts -->
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script src="/apps/js/bootstrap.bundle.min.js"></script>
        <script src="/apps/js/crm-hbs-utils.js"></script>
        <script src="/apps/js/wx-client-dom.js"></script>
        <script>
            function showQueryForm() {
                const modal = new bootstrap.Modal(document.getElementById('queryModal'));
                modal.show();
            };
            function submitQueryForm() {
                const queryParams = new URLSearchParams();
                const paramsToCheck = ['uid'];
                for (const param of paramsToCheck) {
                    const value = encodeURIComponent(document.getElementById(param).value);
                    if (value && value !== '') queryParams.append(param, value);
                }
                const url = `https://totemlife.cn/apps/crm/disclose-user-info?${queryParams.toString()}`;

                // 关闭 modal 对话框
                const modal = bootstrap.Modal.getInstance(document.getElementById('queryModal'));
                modal.hide();

                // 延迟一小段时间后再跳转到新页面，以确保 modal 关闭
                setTimeout(() => {
                    window.location.href = url;
                }, 300); // 300 毫秒延迟时间，可以根据需要调整

            };
        </script>

    </body>
</html>

